<template>
  <div class="credit-management">
    <div
      v-if="!detail"
      class="no-credit-container"
    >
      <div
        v-if="isOperation"
        class="top-container"
      >
        <el-button
          v-auth="{v: pms}"
          class="border-btn"
          size="mini"
          @click="creditSetting"
        >设置信用</el-button>
      </div>
      <div class="img-container">
        <img src="@CRM/assets/img/no_setting_credit.png">
        <span class="tips">未设置信用</span>
      </div>
    </div>
    <div
      v-else
      class="credit-container"
    >
      <div class="top-container">
        <el-row :gutter="20">
          <el-col :span="8">
            <template v-if="isOperation">
              <el-button
                v-auth="{v: pms}"
                class="border-btn"
                size="mini"
                @click="creditSetting"
              >调整信用</el-button>
            </template>
            <el-button
              v-auth="{v: pms}"
              class="border-btn"
              size="mini"
              @click="checkHistory"
            >调整记录</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="credit-preview">
        <credit-data
          ref="creditDataRef"
          :detail="detail"
          :mode="mode"
        />
      </div>
    </div>
    <credit-setting
      ref="creditSettingRef"
      :mode-id="modeId"
      :mode="mode"
      @on-success="changeSuccess"
    />
    <!--信用调整记录 -->
    <detail-drawer
      ref="detailDrawer"
      custom-title
    >
      <template #title>
        <span>信用调整记录</span>
      </template>
      <template #contents>
        <div class="drawer-content">
          <operation-view
            :id=" detail?.id"
            mode="credit"
          />
        </div>
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import { useRoute } from 'vue-router'
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue'

export default {
  components: {
    creditSetting: defineAsyncComponent(() =>
      import('./modules/creditSetting.vue')
    ),
    creditData: defineAsyncComponent(() => import('./modules/creditData.vue')),
  },
  props: {
    modeId: {
      type: Number,
      default: 0,
    },
    mode: {
      type: String,
      default: 'distribute',
    },
    isOperation: {
      type: Boolean,
      default: true,
    },
    // 操作权限
    pms: {
      type: Array,
      default: () => {},
    },
  },
  setup(props, context) {
    const route = useRoute()
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const creditSettingRef = ref(null)
    const detailDrawer = ref(null)
    const creditDataRef = ref(null)
    var reactiveData = reactive({
      detail: null,
      getForCredit: {
        relationId: props.modeId
          ? props.modeId
          : route.query.id
            ? Number(route.query.id)
            : 0,
        creditType: props.mode,
      },
    })
    const creditBtn = (flowStatus) => {
      var bool = false
      if (flowStatus === 'DOING') {
        currentInstance.proxy.customMessage({
          type: 'warning',
          message: '您的信用正在审核，暂不支持调整',
        })
        bool = true
      }
      return bool
    }
    const creditSetting = () => {
      var types = 'create'
      // 判断是否可以调整信用
      if (reactiveData.detail === null) {
        types = 'create'
      } else {
        var bool = creditBtn(reactiveData.detail.flowStatus)
        if (reactiveData.detail.creditStatus === '-1') {
          if (!bool) {
            types = 'edit'
          } else {
            return
          }
        } else if (reactiveData.detail.creditStatus === '1') {
          if (!bool) {
            types = 'change'
          } else {
            return
          }
        } else {
          currentInstance.proxy.customMessage({
            type: 'warning',
            message: '你暂时不符合信用调整的条件',
          })
          return
        }
      }
      creditSettingRef.value.open({
        types: types,
        creditDetail: reactiveData.detail,
      })
    }

    const checkHistory = () => {
      detailDrawer.value.open()
    }
    const changeSuccess = () => {
      console.log(5445)
      context.emit('onSuccess')
      creditDetail(true)
    }
    const creditDetail = (refresh) => {
      api.common.CREDIT_DETAIL(reactiveData.getForCredit).then((res) => {
        if (res.code === 0) {
          reactiveData.detail = res.data?.data
          if (refresh) {
            creditDataRef.value.getList()
          }
        }
      })
    }
    onMounted(() => {
      creditDetail(false)
    })
    return {
      creditSettingRef,
      creditDataRef,
      creditSetting,
      detailDrawer,
      checkHistory,
      ...toRefs(reactiveData),
      changeSuccess,
    }
  },
}
</script>

<style lang="scss" scoped>
.credit-management {
  .no-credit-container {
    .img-container {
      width: 240px;
      margin: 60px auto 20px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      img {
        width: 100%;
      }
      .tips {
        text-align: center;
      }
    }
  }
  .credit-container {
    .top-container {
      margin-bottom: 20px;
    }
  }
}
</style>
